<template>
	<div>
		<van-nav-bar @click-left="clickLeft">
			<template #left>
				<img class="left-img" src="../../assets/img/back.png" />
			</template>
			<template #title>
				<div class="pc-b2">添加</div>
			</template>
			<!-- <template #right>
				<div class="ipad-pc-b2">
					<div class="d-flex">
						<img class="settings-img" src="../../assets/img/pc/settings.png" />
					</div>
				</div>
			</template> -->
		</van-nav-bar>
		<div class="books-mine">
			
			<div class="catalogue-box">
				<div class="pc-main">
					<div class="d-flex">
						<van-tabs v-model:active="active" class="second-tab" scrollspy background="#F3F6F7"
							line-height="0" title-active-color="#4098F9" @click-tab="onClickTab">
							<van-tab v-for="(item, index) in TabList" :key="index" :name="item.id">
								<template #title>
									<div class="tab-item">
										<div>{{ item.name }}</div>
										<img class="line-img" v-if="active === index" src="../../assets/img/line.png" />
									</div>
								</template>
							</van-tab>
						</van-tabs>
					</div>
					<div class="sort-tabs d-flex d-row-center">
						<van-tabs v-model:active="active2" type="card" background="#F3F6F7" line-height="0">
							<van-tab v-for="(item, index) in TabList2" :key="index" :name="item.id">
								<template #title>
									<div>{{ item.name }}</div>
								</template>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
		<div class="add-books-box">
			<div class="add-btn-box">
				<div class="add-btn" :class="tabIndex===1 ? 'active':''" @click="FnClick(1)">
					未添加{{productsFilter.length}}
				</div>
				<div class="add-btn" :class="tabIndex===2 ? 'active':''" @click="FnClick(2)">已添加{{productsFilter2.length}}
				</div>
			</div>
			<div class="books-list pc-main">
				<div v-if="tabIndex == 1">
					<block-card :products="productsFilter"></block-card>
				</div>
				<div v-else>
					<block-card :products="products2"></block-card>
				</div>
				<van-empty description="暂无数据" v-if="tabIndex == 1 ? productsFilter.length == 0 : productsFilter2.length == 0" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();
	import BlockCard from "@/components/BlockCard.vue";
	import bookImage from "@/assets/img/book/9.png";
	const tabIndex = ref(1)
	// 未添加
	const products = ref([{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 1,
			tab: 1,
			nav: 0
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 1,
			tab: 1,
			nav: 0
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 1,
			tab: 1,
			nav: 1
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 1,
			tab: 2,
			nav: 1
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 1,
			tab: 3,
			nav: 2
		}
	]);
	// 分类筛选后数据
	const productsFilter = computed(() => {
		return products.value.filter(v => {
			return (v.tab == active.value || active.value == 0) && v.nav == active2.value
		})
	})
	// 已添加
	const products2 = ref([{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 0,
			tab: 1,
			nav: 0
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 0,
			tab: 1,
			nav: 0
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 0,
			tab: 1,
			nav: 0
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 0,
			tab: 1,
			nav: 1
		},
		{
			id: "010",
			image: bookImage,
			name: "依提示寫一篇英文作文，文長至少120個單詞（words）",
			num: 999,
			status: 0,
			tab: 2,
			nav: 2
		}
	]);
	// 分类筛选后数据
	const productsFilter2 = computed(() => {
		return products2.value.filter(v => {
			return (v.tab == active.value || active.value == 0) && v.nav == active2.value
		})
	})
	
	// 一级分类
	const active = ref(0);
	const TabList = ref([{
			id: 0,
			name: "全部",
		},
		{
			id: 1,
			name: "國小",
		},
		{
			id: 2,
			name: "國中",
		},
		{
			id: 3,
			name: "高中",
		},
	]);
	// 二级分类
	const active2 = ref(0);
	const TabList2 = ref([{
			id: 0,
			name: "分类1",
		},
		{
			id: 1,
			name: "分类2",
		},
		{
			id: 2,
			name: "分类3",
		},
		{
			id: 3,
			name: "分类4",
		},
	]);

	const FnClick = (num) => {
		tabIndex.value = num
	}
	const onClickTab = (data) => {
		console.log(data);
	};
	const clickLeft = () => {
		router.back();
	};
</script>

<style lang="scss" scoped>
	.van-nav-bar{
		background: #fff!important;
	}
	.add-books-box {
		background: #fff;

		.books-list {
			margin: 24px;

			/*平板竖屏*/
			@media screen and (min-width: 800px) {
				margin: 24px auto;
				box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
				border-radius: 8px 8px 8px 8px;
				padding: 24px 42px;
			}
		}

		.add-btn-box {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding-top: 17px;

			.add-btn {
				width: 50%;
				height: 50px;
				background: #f7f9fc;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 0px 0px 0px 0px;

				&.active {
					background: rgba(30, 123, 254, 0.09);
					color: #1e7bfe;
				}
			}
		}
	}

	.catalogue-box {
		.pc-catalogue {
			width: 118px;
			height: 52px;
			margin: 20px auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.add-tab {
			margin-left: auto;
			width: 50px;
		}

		.second-tab {
			width: 100%;
			overflow: hidden;

			.tab-item {
				position: relative;

				.line-img {
					position: absolute;
					bottom: -8px;
					right: 0;
					width: 29px;
					height: 7px;
				}
			}
		}

		.sort-tabs {
			margin-top: 15px;
		}
	}
</style>